<template>
  <div class="content">
    <div class="index-banner">
      <div class="apply-time">
        <p class="semibold">
          报名时间：<br />
          <b>{{ projectInfos.regBegin | formatTime("YYYY-MM-DD HH:mm") }}</b>
          至
          <b>{{ projectInfos.regEnd | formatTime("YYYY-MM-DD HH:mm") }}</b>
        </p>
      </div>
      <div class="apply-btn">
        <div class="van-button" @click="goPlatform(false, $event)">
          <span>中小学报名</span>
        </div>
        <div class="van-button" @click="goPlatform(true, $event)">
          <span>延缓入学登记</span>
        </div>
      </div>
    </div>
    <!-- <div class="inner">
      <div class="index-notice">
        <div class="notice-img">
          <img :src="require('../assets/images/notice.png')" alt="" />
        </div>
        <div class="notice-text">由于疫情原因，现场录取确认时间延迟。</div>
      </div>
    </div> -->
    <div class="icon-link">
      <router-link class="item" :to="{ path: '/notice' }">
        <i class="icon icon01"></i>
        <span>招生计划</span>
      </router-link>
      <router-link class="item" :to="{ path: '/notice' }">
        <i class="icon icon02"></i>
        <span>操作指南</span>
      </router-link>
      <router-link class="item" :to="{ path: '/notice' }">
        <i class="icon icon03"></i>
        <span>问题答疑</span>
      </router-link>
      <router-link class="item" :to="{ path: '/notice' }">
        <i class="icon icon04"></i>
        <span>学区查询</span>
      </router-link>
      <router-link class="item" :to="{ path: '/notice' }">
        <i class="icon icon05"></i>
        <span>政策法规</span>
      </router-link>
      <router-link class="item" :to="{ path: '/notice' }">
        <i class="icon icon06"></i>
        <span>学区图</span>
      </router-link>
      <router-link class="item" :to="{ path: '/notice' }">
        <i class="icon icon07"></i>
        <span>幼儿园报名</span>
      </router-link>
      <router-link class="item" :to="{ path: '/notice' }">
        <i class="icon icon08"></i>
        <span>咨询电话</span>
      </router-link>
    </div>
    <div class="module inner">
      <div class="notice-main">
        <h3 class="notice-title"><span>家长必读</span></h3>
        <div class="info" v-html="projectInfos.homeNote"></div>
      </div>
    </div>
    <div class="bottom">投诉建议拨打：0996-2168236</div>
    <div class="footer">
      {{ copyRight }}
    </div>
  </div>
</template>
<script>
import localDb from "../utils/localDb.js";
import { formatDate } from "../utils/util";
import { getSysZt } from "../utils/api";
export default {
  data() {
    return {
      copyRight: "", // 页尾版权信息
    };
  },
  created() {
    localDb.clear("3");
  },
  methods: {
    goPlatform(boolean, e) {
      // console.log(boolean);
      if (boolean) {
        localDb.set("delayApply", true);
        this.$store.commit("SETDELAYAPPLY", true);
        this.$router.push("/zmkm");
      } else {
        this.$store.commit("SETDELAYAPPLY", "");
        this.$router.push({ path: "/notice" });
      }
    },
    formatDateTime(fmt, mydate) {
      return formatDate(fmt, mydate);
    },
    compareDate(date) {
      let myDate = new Date(),
        time1 = myDate.getTime(), // 当前日期时间戳
        dateformat = date.replace(/T/g, " "),
        day2 = new Date(dateformat.replace(/-/g, "/")),
        time2 = day2.getTime(); //所选日期时间戳
      if (parseInt(time2) > parseInt(time1)) {
        return false;
      }
      return true;
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
  },
  computed: {
    projectInfos() {
      return this.$store.state.frontPage.projectInfos;
    },
  },
  created() {
    this.getSysZt();
    localDb.clear("3");
  },
  mounted() {
    this.$store.dispatch("fetchGetProject", {
      sucCallback: () => {},
      falCallback: () => {
        //console.log(msg)
      },
    });
    this.$fetch(`/api/Student/GetSysPara`, { key: "copyRight" }, "get").then(
      (data) => {
        if (data.res == 0) {
          this.copyRight = data.data[0].value;
        } else {
          this.$toast(data.msg);
        }
      }
    );
    this.$fetch(`/api/Student/GetSysPara`, { key: "SysName" }, "get").then(
      (data) => {
        if (data.res == 0) {
          this.$store.dispatch("setWpzswTitle", data.data[0].value);
        } else {
          this.$toast(data.msg);
        }
      }
    );
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.content {
  background-color: #f5f5f5;
}
.index-banner {
  width: 750px;
  height: 360px;
  background: url(~@/assets/images/bg_sy.png) no-repeat center/cover;
  .apply-time {
    padding: 20px 51px;
    p {
      color: #fff;
      font-size: 32px;
      text-align: left;
      b {
        color: #fcee7d;
      }
    }
  }
  .apply-btn {
    margin-left: 70px;
    display: flex;
    flex-direction: column;
    .van-button {
      width: 252px;
      height: 80px;
      border-radius: 40px;
      margin-bottom: 20px;
      background-color: #4fb4fd;
      font-family: PingFangSC-Semibold;
      font-size: 32px;
      color: #fff;
      line-height: 80px;
      &:active {
        background-color: #fff;
        color: #0195ff;
      }
      &::before {
        background-color: unset;
      }
    }
  }
}
.index-notice {
  height: 80px;
  display: flex;
  align-items: center;
  .notice-img {
    width: 125px;
    margin-top: -7px;
    margin-left: -10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .notice-text {
    font-size: 26px;
    color: #ff0000;
    margin-left: 20px;
  }
}
.icon-link {
  border-top: 2px solid #f9f9f9;
  padding: 40px 36px 10px;
  margin-bottom: 20px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 25%;
    font-size: 30px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000;
    font-family: "PingFangSC-Regular";
    .icon {
      width: 88px;
      height: 88px;
      border-radius: 24px;
      margin-bottom: 18px;
    }
    .icon01 {
      background: url(~@/assets/images/icon_zsjh.png) no-repeat center/cover;
    }
    .icon02 {
      background: url(~@/assets/images/icon_czzn.png) no-repeat center/cover;
    }
    .icon03 {
      background: url(~@/assets/images/icon_wtdy.png) no-repeat center/cover;
    }
    .icon04 {
      background: url(~@/assets/images/icon_xqcx.png) no-repeat center/cover;
    }
    .icon05 {
      background: url(~@/assets/images/icon_zszc.png) no-repeat center/cover;
    }
    .icon06 {
      background: url(~@/assets/images/icon_xqf.png) no-repeat center/cover;
    }
    .icon07 {
      background: url(~@/assets/images/icon_yey.png) no-repeat center/cover;
    }
    .icon08 {
      background: url(~@/assets/images/icon_zxdh.png) no-repeat center/cover;
    }
  }
}
.notice-main {
  padding: 30px 0 20px;
  .info {
    line-height: 54px;
    text-align: justify;
    font-size: 30px;
    color: #222;
    /deep/ p {
      b {
        font-family: PingFangSC-Semibold;
        font-weight: normal;
      }
    }
  }
}
.bottom {
  height: 80px;
  line-height: 80px;
  border-top: 2px solid #eee;
  background-color: #fff;
  font-size: 24px;
  color: #0195ff;
}
.footer {
  height: 80px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #999;
  background-color: #eee;
}
</style>
